<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="../../../../static/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../../../static/css/ylb.css">
	<link rel="shortcut icon" href="../../../../static/img/logo.png">
	<script type="text/javascript" src="../../../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../../../static/js/popper.min.js"></script>
	<script type="text/javascript" src="../../../../static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../../../static/js/qrcode.min.js"></script>
	<script type="text/javascript" src="../../../../static/js/clipboard.min.js"></script>
	<script type="text/javascript">
        var timestamp = new Date().getTime();
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = './app.js?v=' + timestamp;
        document.head.appendChild(script);
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = './app.css?v=' + timestamp;
        document.head.appendChild(link);
    </script>
</head>
<body>
    
    <div id="app">
    	
    	<!-- 左侧 -->
    	<div class="left">
    		<div class="dhview">
    
    			<!-- LOGO -->
    			<a href="../../../index/" class="index">
    			    <div class="logo"></div>
    			</a>
    
    			<!-- 导航 -->
			    <ul>
			    <a href="../../../index/" >
			    <li class="nav-li">
			        <i class="icon i-data"></i>
			        <span class="nav-text">数据</span>
			    </li>
			    </a>
			    
			    <a href="../../../qun/">
			    <li class="nav-li">
			        <i class="icon i-hm"></i>
			        <span class="nav-text">活码</span>
			    </li>
			    </a>
			    
				<a href="../../../dwz/">
				<li class="nav-li">
				    <i class="icon i-dwz"></i>
				    <span class="nav-text">短网址</span>
				</li>
				</a>
				
				<a href="../../../tbk/">
				<li class="nav-li">
				    <i class="icon i-tbk"></i>
				    <span class="nav-text">淘宝客</span>
				</li>
				</a>
				
				<a href="../../../shareCard/">
				<li class="nav-li">
				    <i class="icon i-share"></i>
				    <span class="nav-text">分享卡片</span>
				</li>
				</a>
				
				<a href="../../../plugin/" class="selected">
				<li class="nav-li">
				    <i class="icon i-plugin-dark"></i>
				    <span class="nav-text">插件中心</span>
				</li>
				</a>
				
				<a href="../../../kami/">
				<li class="nav-li">
				    <i class="icon i-kami"></i>
				    <span class="nav-text">卡密分发</span>
				</li>
				</a>
				
				<a href="../../../config/">
				<li class="nav-li">
				    <i class="icon i-config"></i>
				    <span class="nav-text">配置中心</span>
				</li>
				</a>
				
				<a href="../../../sucai/">
				<li class="nav-li">
				    <i class="icon i-sucai"></i>
				    <span class="nav-text">素材管理</span>
				</li>
				</a>
				
				<a href="../../../user/">
				<li class="nav-li">
				    <i class="icon i-account"></i>
				    <span class="nav-text">账号管理</span>
			    </li>
			    </a>
			</ul>
    
    		<!-- 账号 -->
    		<div class="account">加载中...</div>
    		    
    		</div>
    	</div>
    
    	<!-- 右侧 -->
    	<div id="right">
    	    
    	    <!--面板标题-->
    		<h3>
    		    <a href="./" class="mianbaoxie_a">插件中心</a> ➜ <span class="mbx">引流宝插件示例</span> 
		    </h3>
		    
		    <!--数据区域-->
    		<div class="data-card">
    		    
    			<!-- 按钮区域 -->
    			<div class="button-view" id="button-view" style="display:none;">
    			    
    				<!--flex布局按钮容器-->
    			    <div class="flex-button-view">
    			        
    			        
        			    <!--导航-->
        			    <div class="button-daohang">
        			        <!--返回按钮-->
            			    <a href="../../">
            			        <div class="back-lastpage"></div>
            			    </a>
        			        <button class="default-btn">管理</button>
        			    </div>
        			    
        			    <!--功能-->
        			    <div class="button-gongneng">
        			        
        			        <button class="tint-btn" 
            				data-toggle="modal" 
            				data-target="#createDataModal" 
            				onclick="getDomainNameList('create')" style="margin-left:5px;">创建</button>
        			    </div>
    			    </div><!-- flex-button-view -->
    			</div>
    
    			<!-- 列表区域 -->
    			<div class="data-list">
    			    
    				<table class="table">
    				    <thead></thead>
    				    <tbody></tbody>
    				</table>
    			</div><!-- data-list -->
    			
    			<p class="loading" style="display: none;"></p>
    			
    			<!-- 分页 -->
    			<div class="fenye"></div>
    			
    		</div><!-- data-card -->
    	</div><!-- right -->
    
    	<!-- 创建 -->
        <div class="modal fade" id="createDataModal">
            
            <div class="modal-dialog" style="max-width:700px;">
                <div class="modal-content">
                    
                        <!-- 头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">创建</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        
                        <!-- 表单 -->
                        <div class="modal-body">
                            <form id="createData" enctype="multipart/form-data">
                            
                            <!--标题\访问限制\到期时间-->
                            <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                                <div style="flex:1;">
                                    <span class="text">标题</span>
                                    <input type="text" name="data_title" class="form-control" autocomplete="off" placeholder="标题">
                                </div>
                                <div style="flex:1;margin-left:10px;">
                                    <span class="text">访问限制</span>
                                    <select name="data_limit" class="form-control" title="">
                                        <option value="1">不限制</option>
                                        <option value="2">只允许在手机打开</option>
                                        <option value="3">只允许在微信内打开</option>
                                        <option value="4">只允许在QQ内打开</option>
                                        <option value="5">只允许在抖音内打开</option>
                                    </select>
                                </div>
                                <div style="flex:1;margin-left:10px;" title="想一直不过期就把年份设置久一些">
                                    <span class="text">到期时间</span>
                                    <input type="datetime-local" class="form-control" name="data_expire_time" id="data_expire_time_picker">
                                </div>
                            </div>

                            <!--域名-->
                            <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                                <div style="flex:1;">
                                    <span class="text">短链域名</span>
                                    <div class="upload-input" title="短网址使用的域名">
                                        <select class="form-control" name="data_dlym"></select>
                                    </div>
                                </div>
                                <div style="flex:1;margin-left:10px;">
                                    <span class="text">入口域名</span>
                                    <div class="upload-input" title="点击短网址将会跳转到这个域名">
                                        <select class="form-control" name="data_rkym"></select>
                                    </div>
                                </div>
                                <div style="flex:1;margin-left:10px;">
                                    <span class="text">落地域名</span>
                                    <div class="upload-input" title="落地页使用这个域名">
                                        <select class="form-control" name="data_ldym"></select>
                                    </div>
                                </div>
                            </div>
                            
                            <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                                <div style="flex:1;">
                                    <span class="text">上传图片</span>
                                    <div class="upload-input" title="">
                                        <input type="text" name="data_pic" class="form-control" autocomplete="off" placeholder="粘贴图片链接或上传">
                                        <span class="input-group-text">
                                            <span id="chooseIMG" onclick="getSuCai('1','createDataModal','pic');">上传</span>
                                        </span>
                                    </div>
                                </div>
                                <div style="flex:1;margin-left:10px;">
                                    <span class="text">跳转地址</span>
                                    <div class="upload-input" title="">
                                        <input type="text" class="form-control" name="data_jumplink" autocomplete="off" placeholder="粘贴http://或https://链接">
                                    </div>
                                </div>
                            </div>
                            </form>
                        </div><!-- modal-body -->
                        
                        <!-- 底部操作 -->
                        <div class="modal-footer">
                            <div class="footer-btn">
                            <div class="faqnav" title="阅读使用文档">
                                <span class="faq">
                                    <a href="javascript:;" target="_blank">?</a>
                                </span>
                            </div>
                            <div class="btnnav">
                                <button type="button" class="default-btn" onclick="createData();">立即创建</button>
                            </div>
                        </div>
                        
                    </div><!-- modal-footer -->
                    
                    <!-- 操作反馈 -->
                    <div class="result"></div>
                    
                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- createDataModal -->
      	
      	<!-- 编辑 -->
        <div class="modal fade" id="editDataModal">
            
            <div class="modal-dialog" style="max-width:700px;">
                <div class="modal-content">
                    
                        <!-- 头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">编辑</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        
                        <!-- 表单 -->
                        <div class="modal-body">
                            <form id="editData" enctype="multipart/form-data">
                            
                            <!--标题\访问限制\到期时间-->
                            <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                                <div style="flex:1;">
                                    <span class="text">标题</span>
                                    <input type="text" name="data_title" class="form-control" autocomplete="off" placeholder="标题">
                                </div>
                                <div style="flex:1;margin-left:10px;">
                                    <span class="text">访问限制</span>
                                    <select name="data_limit" class="form-control" title="">
                                        <option value="1">不限制</option>
                                        <option value="2">只允许在手机打开</option>
                                        <option value="3">只允许在微信内打开</option>
                                        <option value="4">只允许在QQ内打开</option>
                                        <option value="5">只允许在抖音内打开</option>
                                    </select>
                                </div>
                                <div style="flex:1;margin-left:10px;" title="想一直不过期就把年份设置久一些">
                                    <span class="text">到期时间</span>
                                    <input type="datetime-local" class="form-control" name="data_expire_time" id="data_expire_time_picker">
                                </div>
                            </div>

                            <!--域名-->
                            <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                                <div style="flex:1;">
                                    <span class="text">短链域名</span>
                                    <div class="upload-input" title="短网址使用的域名">
                                        <select class="form-control" name="data_dlym"></select>
                                    </div>
                                </div>
                                <div style="flex:1;margin-left:10px;">
                                    <span class="text">入口域名</span>
                                    <div class="upload-input" title="点击短网址将会跳转到这个域名">
                                        <select class="form-control" name="data_rkym"></select>
                                    </div>
                                </div>
                                <div style="flex:1;margin-left:10px;">
                                    <span class="text">落地域名</span>
                                    <div class="upload-input" title="落地页使用这个域名">
                                        <select class="form-control" name="data_ldym"></select>
                                    </div>
                                </div>
                            </div>
                            
                            <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                                <div style="flex:1;">
                                    <span class="text">上传图片</span>
                                    <div class="upload-input" title="">
                                        <input type="text" name="data_pic" class="form-control" autocomplete="off" placeholder="粘贴图片链接或上传">
                                        <span class="input-group-text">
                                            <span id="chooseIMG" onclick="getSuCai('1','createDataModal','pic');">上传</span>
                                        </span>
                                    </div>
                                </div>
                                <div style="flex:1;margin-left:10px;">
                                    <span class="text">跳转地址</span>
                                    <div class="upload-input" title="">
                                        <input type="text" class="form-control" name="data_jumplink" autocomplete="off" placeholder="粘贴http://或https://链接">
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="data_id" />
                            
                            </form>
                        </div><!-- modal-body -->
                        
                        <!-- 底部操作 -->
                        <div class="modal-footer">
                            <div class="footer-btn">
                            <div class="faqnav" title="阅读使用文档">
                                <span class="faq">
                                    <a href="" target="_blank">?</a>
                                </span>
                            </div>
                            <div class="btnnav">
                                <button type="button" class="default-btn" onclick="editData();">立即保存</button>
                            </div>
                        </div>
                        
                    </div><!-- modal-footer -->
                    
                    <!-- 操作反馈 -->
                    <div class="result"></div>
                    
                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- editDataModal -->
      	
      	<!-- 删除确认 -->
        <div class="modal fade" id="delDataModal">
            
            <div class="modal-dialog">
                <div class="modal-content">
                    
                    <!-- 头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">删除</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    
                    <!-- 内容 -->
                    <div class="modal-body">
                        将会删除这条记录！删除后无法恢复。
                    </div>
                    
                    <!-- 底部操作 -->
                    <div class="modal-footer"></div>
                    
                    <!-- 操作反馈 -->
                    <div class="result"></div>
                    
                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- delDataModal -->
        
        <!-- 分享 -->
        <div class="modal fade" id="shareDataModal">
            
            <div class="modal-dialog">
                <div class="modal-content">
                    
                    <!-- 头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">分享</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    
                    <!-- 表单 -->
                    <div class="modal-body">
                        <div class="box">
                            <div class="shortUrl">
                                <span class="text">短链接：</span><span id="shortUrl"></span>
                            </div>
                            <br>
                            <div class="longUrl">
                                <span class="text">长链接：</span><span id="longUrl"></span>
                            </div>
                            <div class="Qrcode" id="shareQrcode"></div>
                            <p style="text-align:center;font-size:15px;color:#999;">
                                请扫码查看
                            </p>
                        </div>
                    </div><!-- modal-body -->
                    
                    <!-- 底部操作 -->
                    <div class="modal-footer"></div>
                    
                    <!-- 操作反馈 -->
                    <div class="result"></div>
                    
                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- shareDataModal -->
        
        <!--素材库-->
        <div class="modal fade" id="suCaiKu">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    
                    <!-- 头部 -->
                    <div class="modal-header" title="点击右上角&times;可返回二维码列表">
                        <h4 class="modal-title">素材库</h4>
                        <span class="hideSuCaiPannel_closeIcon"></span>
                    </div>
                    
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <div class="sucai-upload">
                            <button type="button" class="default-btn upload_sucai_button">
                                <span>上传素材</span>
                                <form id="uploadTosuCaiKuForm" enctype="multipart/form-data">
                                    <input type="file" name="file" class="upload_sucai" accept="image/*" id="uploadTosuCaiKu" />
                                    <input text="text" name="upload_sucai_fromPannel" style="display:none;" />
                                    <input text="text" name="upload_sucai_fromINput" style="display:none;" />
                                </form>
                            </button>
                        </div>
                        
                        <!--素材容器-->
                        <div class="sucai-view"></div>
                        
                        <!--分页-->
                        <div class="fenye"></div>
                    </div>
                    
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <div class="footer-btn">
                        	<div class="faqnav" title="阅读使用指南">
                        	    <span class="faq"><a href="https://viusosibp88.feishu.cn/docx/TOa4dHdxToi9OWxvcHXcNnxNntf" target="_blank">?</a></span>
                        	</div>
                        	<div class="btnnav">
                        	    <button type="button" class="default-btn" data-dismiss="modal" onclick="hideSuCaiPannel()">取消</button>
                        	</div>
                        </div>
                    </div>
                    
                    <!-- 操作反馈 -->
                    <div class="result"></div>
                    
                </div>
            </div>
        </div><!-- suCaiKu -->
        
        <!-- 全局信息提示框 -->
        <div id="notification">
            <div id="notification-text"></div>
        </div>
    
    </div><!-- app -->
    
    <script>
        
        // 上传至素材库
        $("#uploadTosuCaiKu").change(function(e){
            
            // 获取选择的文件
            var fileSelect = e.target.files;
            if(fileSelect.length>0){
                
                // file表单数据
                var imageData = new FormData(document.getElementById("uploadTosuCaiKuForm"));
                
                // 获取 fromPannel
                var fromPannel = $('#suCaiKu input[name="upload_sucai_fromPannel"]').val();
                
                // 获取 fromINput
                var fromINput = $('#suCaiKu input[name="upload_sucai_fromINput"]').val();
                
                // 异步上传
                $.ajax({
                    url:"../../../public/uploadToSuCaiKu.php",
                    type:"POST",
                    data:imageData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        
                        if(res.code == 200){
                            
                            // 上传成功
                            // 重新获取素材列表
                            getSuCai(1,fromPannel,fromINput);
                        }else{
                            
                            // 上传失败
                            showErrorResult(res.msg)
                        }
                        
                        // 清空file控件的选择
                        $('#uploadTosuCaiKu').val('');
                    },
                    error: function() {
                        
                        // 上传失败
                        alert('上传至素材库失败！')
                    }
                })
            }
        })
    </script>
</body>
</html>